/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Fragment, useRef} from 'react';
import {Dimensions, Button, View, StyleSheet} from 'react-native';
import IJKPlayer from './IJKPlayer';

const {width: D_WIDTH, height: D_HEIGHT} = Dimensions.get('window');

const defaultUrl = 'http://192.168.101.109:8089/lalala.mp4';
const defaultUrl1 = 'http://192.168.101.109:8089/2.mp4';
const defaultUrl2 = 'rtmp://202.69.69.180:443/webcast/bshdlive-pc';

class App extends React.Component {
    state = {
        videoWidth: D_WIDTH,
        videoHeight: 200,
        url: defaultUrl2,
    };
    _onInfo = infoCode => {
        // console.log('infoCode:', infoCode);
    };
    _onError = errorCode => {
        console.log('errorCode:', errorCode);
    };

    _onReceiveRatioHW = ratioHW => {
        console.log('ratioHW:', ratioHW);
        console.log('D_WIDTH:', D_WIDTH);
        const {videoHeight} = this.state;
        const videoWidth = videoHeight / ratioHW;
        console.log('videoWidth:', videoWidth);
        this.setState({...this.state, videoWidth});
    };

    _onReceiveDuration = duration => {
        console.log('duration:', duration);
    };
    _onPrepared = () => {
        console.log('onPrepared in App');
    };
    _onPause = () => {
        console.log('pause');
        this.videoRef.pause();
    };
    _onStop = () => {
        console.log('stop');
        this.videoRef.stop();
    };
    _onPlay = () => {
        console.log('start');
        this.videoRef.play();
    };
    _onProgressUpdate = progress => {
        // console.log('Progress:', progress);
    };

    render() {
        const {videoWidth, videoHeight, url} = this.state;
        return (
            <Fragment>
                <View style={styles.videoViewContainer}>
                    <IJKPlayer
                        ref={ref => this.videoRef = ref}
                        url={url}
                        style={{width: videoWidth, height: videoHeight}}
                        onPrepared={this._onPrepared}
                        onInfo={this._onInfo}
                        onError={this._onError}
                        onReceiveRatioHW={this._onReceiveRatioHW}
                        onReceiveDuration={this._onReceiveDuration}
                        onProgressUpdate={this._onProgressUpdate}
                    />
                </View>
                <Button onPress={this._onPause} title={'pause'}/>
                <Button onPress={this._onPlay} title={'play'}/>
                <Button onPress={this._onStop} title={'stop'}/>
                <Button title={'1'} onPress={()=>this.setState({url: defaultUrl1})}/>
                <Button title={'2'} onPress={()=>this.setState({url: defaultUrl2})}/>
            </Fragment>
        );
    }
};

const styles = StyleSheet.create({
    videoViewContainer: {
        backgroundColor: 'black',
        width: D_WIDTH,
        borderWidth: 1,
        borderColor: 'blue',
        alignItems: 'center',
    },
});

export default App;


